//实现添加待办事项功能
//1.获取页面元素+
const todoInput = document.getElementById('todoInput');//输入框
const addBtn = document.getElementById('addBtn');//添加按钮
const todoList = document.getElementById('todoList');//待办事项列表
let todos = [];//待办事项数组
// 2.渲染待办事项列表（数组内容渲染到html页面上）
function renderTodos() {
  todoList.innerHTML = '';//清空现有列表（避免重复渲染）
  // 遍历数组，生成每一个待办项
  todos.forEach((todo, index) => {
    // 创建li标签（待办项的容器）
    const li = document.createElement('li');
    // 根据完成状态动态添加类名
    li.className = todo.completed ? 'todo-item completed' : 'todo-item';
    // 设置li内容（待办文本+删除按钮）
    li.innerHTML = `
    <input type="checkbox" class="checkbox" 
    ${todo.completed ? 'checked' : ''} data-id="${todo.id}">
  <span>${todo.text}</span>
  <button class="delete-btn" data-id="${todo.id}">删除</button>
`;
    //将li添加到待办事项列表中
    todoList.appendChild(li);//appendChild方法将li元素添加到todoList元素的子节点列表末尾
  });
}
// 3.添加待办事项函数，  添加后保存到本地存储
function addTodo() {
  const todoText = todoInput.value.trim();//获取输入内容，去除空格

  // 输入为空，不执行操作
  if (todoText === '') {
    alert('请输入待办事项');
    return;
  }
  // 生成唯一ID（用时间戳）
  const todoId = Date.now();//当前时间戳，作为唯一ID
  // 将新待办添加到数组
  todos.push({
    id: todoId,
    text: todoText,
    completed: false,//默认未完成
  });


  // 重新渲染待办事项列表
  renderTodos();
  // 保存到本地存储
  saveToLocalStorage();
  // 清空输入框内容
  todoInput.value = '';
  // 查看当前数组内容的每一项
  console.log(todos);
}

// 4.绑定事件
addBtn.addEventListener('click', addTodo);//点击添加按钮，触发添加待办事项函数
// 优化交互：点击enter键也能添加待办事项
todoInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    addTodo();
  }
});
// 5.删除待办事项功能
// 新增：删除待办项的函数
function deleteTodo(todoId) {
  // 从数组中删除对应的待办项
  todos = todos.filter(todo => todo.id !== todoId);
  // 重新渲染待办事项列表
  renderTodos();
  // 保存到本地存储
  saveToLocalStorage();
}
// 绑定删除事件
todoList.addEventListener('click', (e) => {
  // 判断点击的是否是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 获取待办项的ID（前面data-id属性已经携带了）
    const deleteId = parseInt(e.target.dataset.id);
    // 从数组中删除对应的待办项
    deleteTodo(deleteId);

  }
})
// 6.本地存储工具函数（数据持久化保存到浏览器）
function saveToLocalStorage() {
  // 将数组转为json字符串（localStorage只能存储字符串）
  const todosStr = JSON.stringify(todos);
  // 保存到localStorage，键值对方式存储
  localStorage.setItem('todos', todosStr);
}
// 7.从本地存储中加载数据（页面刷新后恢复数据）
function loadFromLocalStorage() {
  // 从localStorage中获取数据
  const savedTodos = localStorage.getItem('todos');
  // 如果有数据，将其转为数组,并更新到todos数组
  if (savedTodos) {
    todos = JSON.parse(savedTodos).map(todo => ({
      ...todo,
      completed: todo.completed || false, // 确保completed属性存在
    }));
    // 重新渲染待办事项列表
    renderTodos();
  }
}
// 新增：切换待办完成状态的函数
function toggleTodoStatus(todoId) {
  // 用map遍历数组，返回新数组（不直接修改原数组）
  todos = todos.map(todo => {
    // 判断当前待办的id是否等于点击的id（找到要修改的项）
    if (todo.id === todoId) {
      // 找到目标项：复制原属性（...todo），并将completed取反（false→true或true→false）
      return { ...todo, completed: !todo.completed };
    } else {
      // 非目标项：直接返回原对象（不修改）
      return todo;
    }
  });
  renderTodos(); // 重新渲染页面（更新样式）
  saveToLocalStorage(); // 保存新状态到本地存储
}
// 新增：监听复选框点击（用事件委托，因为复选框是动态生成的）
todoList.addEventListener('click', (e) => {
  // 判断点击的是复选框（通过class名）
  if (e.target.classList.contains('checkbox')) {
    // 获取复选框上的data-id（即待办项的id），转为数字
    const todoId = parseInt(e.target.dataset.id);
    // 调用函数切换状态
    toggleTodoStatus(todoId);
  }
});


// 8.页面加载时，从本地存储中加载数据
loadFromLocalStorage();
